<%@ page language="java" contentType="text/html; utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insert title here</title>
<link rel="stylesheet" href="js/resources/css/ext-all.css"
	type="text/css"></link>
<link rel="stylesheet" href="css/main.css"
	type="text/css"></link>
<script type="text/javascript" src="js/ext-all-debug.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
Ext.require([
             'Ext.tree.*',
             'Ext.data.*',
             'Ext.tip.*'
         ]);

         Ext.onReady(function() {
             Ext.QuickTips.init();
            
    		var menuStore = Ext.create('Ext.data.TreeStore', {
    			//baseParams: { selDate: '2011-02-22' },
    			
    			proxy: {
    			    type: 'ajax',
    			    url: 'menuTestAction.action',
    			    //url: "treetest.json",
    			    reader: {
    			        type: 'json'
    			        //totalProperty: 'total',
    			        //root: 'root'
    			    }
    			},
                root: {
                    text: 'Ext JS',
                    //id: 'src',
                    expanded: true
                },
    		 	autoLoad: true
    		});

             var menuTree = Ext.create('Ext.tree.Panel', {
            	 id:"menuTree",
                 store: menuStore,
                 /*
                 viewConfig: {
                     plugins: {
                         ptype: 'treeviewdragdrop'
                     }
                 },
                 */
                 region : 'west',
                 //title : 'files',
                 frame: true,
                 renderTo: 'tree-div',
                 height: 500,
                 width: 250,
                 useArrows: true,
                 //hideHeaders: true,
                 containerScroll : true,
                 rootVisible : false, 
                 collapsible: true,
                 /*
                 dockedItems: [{
                     xtype: 'toolbar',
                     items: [{
                         text: 'Expand All',
                         handler: function(){
                        	 menuTree.getEl().mask('Expanding tree...');
                             var toolbar = this.up('toolbar');
                             toolbar.disable();
                             
                             menuTree.expandAll(function() {
                            	 menuTree.getEl().unmask();
                                 toolbar.enable();
                             });
                         }
                     }, {
                         text: 'Collapse All',
                         handler: function(){
                             var toolbar = this.up('toolbar');
                             toolbar.disable();
                             
                             menuTree.collapseAll(function() {
                                 toolbar.enable();
                             });
                         }
                     }]
                 }]
                 */
             });
            
         });
         
</script>


</head>
<body>
<div id="tree-div"></div>
</body>
</html>